.by-tab-item {
  position: relative;

  &::before {
    content            : ' ';
    position           : absolute;
    bottom             : 0;
    left               : 50%;
    width              : 0;
    height             : 8px;
    transition-duration: 200ms;
    border-radius      : 100px;
    background         : var(--color-primary);
    transform          : translate(-50%, 0);
    opacity            : 0;
  }

  &.capsule {
    flex: 1;

    // border-radius: 100px;
    // background: red;
    &::before {
      height: 100%;

    }
  }

  &.checked {
    &::before {
      width        : 42px;
      border-radius: 100px;
      opacity      : 1;
    }

    &.capsule {
      &::before {
        width: 100%;
      }
    }
  }

}